<template>
  <div class="hello">
    <div class="box">
      <div class="item" v-for="item in 20" :key="item" :style="{width: (100 / 4) + '%'}">
        <div class="child">{{item}}</div>
      </div>
    </div>

    <div class="container">
      <div class="list" v-for="item in 15" :key="item">{{item}}</div>
    </div>

    <button @click="dialog = true">
      按钮
    </button>

    <!-- 弹窗 -->
    <div class="dialog" v-if="dialog">
      <div class="close">关闭</div>
      <div class="title"></div>
      <div class="main">
        <p>不是啊 </p>
        <p>不是啊 </p>
        <p>不是啊 </p>
        <p>不是啊 </p>
        <p>不是啊 </p>
        <p>不是啊 </p>
        <p>不是啊 </p>
        <p>不是啊 </p>
        <p>不是啊 </p>
        <p>不是啊 </p>
        <p>不是啊 </p>
        <p>不是啊 </p>
        <p>不是啊 </p>
      </div>
    </div>

    <!-- <div class="ccc" v-textLoading="loading">
      <div class="e">阿拉山口的</div>
    </div>
    <div class="d" style="font-size: 14px;">阿拉山口的</div>
    <div class="f">阿拉山口的</div>
    <div class="g">阿拉山口的</div>-->

    <!-- <ul class="commentList" v-commentLoading="loading">
      <li class="comment">
        <div class="img">
          <img src="../assets/logo.png">
        </div>
        <div class="right">
          <p class="time">2019-01-01</p>
          <p class="desc">阿三开个会阿三的老客户阿斯顿发个</p>
        </div>
      </li>
      <li class="comment">
        <div class="img">
          <img src="../assets/logo.png">
        </div>
        <div class="right">
          <p class="time">2019-01-01</p>
          <p class="desc">阿三开个会阿三的老客户阿斯顿发个</p>
        </div>
      </li>
      <li class="comment">
        <div class="img">
          <img src="../assets/logo.png">
        </div>
        <div class="right">
          <p class="time">2019-01-01</p>
          <p class="desc">阿三开个会阿三的老客户阿斯顿发个</p>
        </div>
      </li>
    </ul>-->
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      loading: true,
      load: {
        loading: true,
        length: 5
      },
      dialog: false
    };
  },
  created() {
    setTimeout(() => {
      this.loading = false;
      this.load.loading = false
      console.log("加载数据")
    }, 5000)
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
  font-size: 20px;
}
p {
  font-size: 18px;
}
.d {
  font-size: 12px;
  transform: scale(0.8);
}
.f {
  font-size: 0.12rem;
  color: red;
}
.g {
  font-size: 12px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.commentList {
  color: #333;
  /* position: absolute; */
  top: 10px;
  position: relative;
}
.comment {
  display: flex;
}
.comment .img {
  width: 100px;
  margin-right: 20px;
}
img {
  width: 100%;
}
.right {
  flex: 1;
  text-align: left;
}

.box {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ddd;
  padding: 10px;
  background: #fff;
  margin-bottom: 20px;
  /* overflow: hidden; */
}
.box .item {
  /* flex: 1; */
  /* margin: 0 10px; */
  height: 100%;
}
.child {
  background: #8bc34a;
  margin: 10px;
  width: 100px;
}

.box2 {
  display: flex;
  /* justify-content: space-around; */
  justify-content: space-between;
  flex-wrap: wrap;
}
.list {
  width: 22%;
  background: #8bc34a;
  margin-top: 10px;
}
/* .container {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-gap: 10px;
}
.list {
    width: 100px; height:100px;
    background-color: skyblue;
    margin-top: 5px;
} */
.container {
  display: flex;
  flex-wrap: wrap;
}
.list {
  width: 24%;
  height: 100px;
  background-color: skyblue;
  margin-top: 15px;
}
.list:not(:nth-child(4n)) {
  margin-right: calc(4% / 3);
}
</style>
